@import "../variables.scss";
@media screen and (min-height: 1081px) {
   .Main-content .card-number {
      display: flex;
      width: 21vw;
      margin: 3.5vh 0;
      justify-content: space-between;
    }
 }
 @media screen and (max-height: 1080px) {
   .Main-content .card-number {
      display: flex;
      width: 21vw;
      margin: 1.5vh 0;
      justify-content: space-between;
    }
 }
.Main-content {
  padding: 0px 0px;
}
/*第一行*/
.Main-content .device-content {
  display: flex;
  justify-content: space-between;
}
.device-content .device-title {
  display: flex;
  align-items: center;
}
.showtitle .DeviceName {
  color: #595959;
  font-family: Source Han Sans CN;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}
.DeviceName .NameIcon {
  margin: 0 3px;
}

.DeviceName .DeviceLocation {
  color: #f2994a;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.showtitle .TerminalName {
  color: #595959;
  font-family: Source Han Sans CN;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.device-content .status {
  position: relative;
  cursor: pointer;
}
.status .statusLight {
  position: absolute;
  top: -2px;
  right: -7px;
}

.status .hover-div {
  width: 102px;
  border: 1px solid #efefef;
  border-radius: 8px;
  background: #ffffff;
  display: none;
  position: absolute;
  top: 15px;
  right: -5px;
  font-size: 12px;
  padding: 10px 0;
}
.hover-div p {
  display: flex;
  align-items: center;
  height: 27px;
  line-height: 27px;
  margin-left: 30px;
}
p .icon {
  margin-right: 10px;
}

.status .show {
  display: block;
}

/*第二行*/


.card-number .number {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-number .number-padding {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-number .numberRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.card-number h6 {
  font-family: "DINCond-Medium", sans-serif;
  color: #262626;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.card-number p {
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #8c8c8c;
}

/*第三行*/
.Main-content .card-icon {
  display: flex;
  justify-content: space-between;
}
.card-icon .icon {
  display: flex;
  justify-content: space-between;
}
.iconContent .spanColor {
  color: #1aa367;
}

.icon img {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.card-icon .btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 2px 6px;
  gap: 8px;
  width: 40px;
  height: 24px;
  border: 1px solid #f2994a;
  border-radius: 4px;
  font-family: "Source Han Sans CN";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #f2994a;
}
